<template>
  <div class="area-tree">
    <div class="area-tree-left" v-if="show">
      <el-tabs type="border-card">
        <el-tab-pane :label="title">
          <div class="scrollbar-box">
            <el-scrollbar>
              <el-tree
                :data="areaTreeData"
                :props="defaultProps"
                show-checkbox
                node-key="value"
                :default-expanded-keys="defaultOpenKey"
                accordion
                :highlight-current="false"
                :default-checked-keys="defaultChecked"
                :check-on-click-node="true"
                :expand-on-click-node="false"
                check-strictly
                :indent="6"
                icon-class="el-icon-arrow-right"
                @check="checkNode"
                ref="areaTree"
              ></el-tree>
            </el-scrollbar>
            <!-- 底部按钮 -->
            <div style="text-align: center;">
              <slot name="bottomBtn" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="page-content">
      <el-scrollbar wrap-class="area-tree-scrollbar">
        <slot />
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'AreaTree',
  props: {
    value: '',
    title: {
      type: String,
      default: '所属地区'
    },
    show: {
      default: true
    },
    // 是否需要全部选项
    isAll: {
      default: true
    },
    // 层级
    level: {
      type: [Number, String],
      default: 3
    },
    // 是否需要默认值
    isDefault: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      areaTreeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      defaultOpenKey: [],
      defaultChecked: [''],
      isSetValue: false
    }
  },
  computed: {
    ...mapGetters(['areaTree'])
  },
  watch: {
    value: {
      immediate: true,
      handler (n) {
        if (n) {
          this.$nextTick(() => {
            this.checkNode({ value: n }, { checkedKeys: [n] })
          })
        }
      }
    }
  },
  mounted () {
    let newTree = this.areaTree.map(item => ({
      label: item.name,
      value: item.code
    }))
    this.areaTreeData = this.dataFilter(newTree, 1)
    if (this.isAll) {
      this.areaTreeData.unshift({ label: '全部', value: '' })
    }
    this.defaultOpenKey = [newTree[0].value]
  },
  methods: {
    dataFilter (list, cLevel) {
      list.forEach(item => {
        // 填充默认值，条件：需要配置默认值、value没有值、没有配置过、且当前项没禁用
        if (
          this.isDefault &&
          !this.value &&
          !this.isSetValue &&
          !item.disabled
        ) {
          this.checkNode({ value: item.value }, { checkedKeys: [item.value] })
          this.isSetValue = true
        }
        if (cLevel >= this.level) {
          item.children = null
        } else if (item.children?.length > 0) {
          item.children = this.dataFilter(item.children, cLevel + 1)
        }
      })
      return list
    },
    checkNode (data, checkInfo) {
      let isCheck = checkInfo.checkedKeys.includes(data.value)
      let value = isCheck ? data.value : ''
      // 没有“全部选项”，且需要默认值的时候，取消选择时选择第一个
      if (this.isAll === false && this.isDefault === true && value === '') {
        value = this.areaTreeData[0].value
      }
      this.defaultChecked = []
      this.$emit('input', value === '' ? null : value)
      this.$refs.areaTree.setCheckedKeys([value])
    }
  }
}
</script>
<style lang="scss" scoped>
.area-tree {
  display: flex;
  .area-tree-left {
    padding: 20px 0 0 20px;
    width: 260px;
    .scrollbar-box {
      display: flex;
      flex-direction: column;
      height: calc(100vh - 203px);
    }
    .el-scrollbar {
      flex: 1;
    }
    :deep(.el-tree-node__content) {
      height: 36px;
      background-color: #f6fbff;
      margin-bottom: 3px;
      border-radius: 4px;
      user-select: none;
    }
    :deep(.is-checked) {
      & > .el-tree-node__content {
        background-color: #b6dcff;
        color: #fff;
      }
    }
    :deep(.el-tree-node__expand-icon) {
      font-size: 14px;
    }
  }
  .page-content {
    width: 0;
    flex: 1;
    .el-scrollbar {
      height: calc(100vh - 85px);
    }
  }
}
</style>
